<div class="blazorise-codeblock">
<div class="html"><pre>
<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">TransferList</span> <span class="htmlAttributeName">TItem</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">string</span><span class="quot">&quot;</span>
              <span class="htmlAttributeName">Items</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>list</span><span class="quot">&quot;</span>
              <span class="htmlAttributeName">SelectionMode</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">ListGroupSelectionMode</span><span class="enumValue">.Single</span><span class="quot">&quot;</span>
              <span class="htmlAttributeName">Mode</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">ListGroupMode</span><span class="enumValue">.Selectable</span><span class="quot">&quot;</span>
              <span class="htmlAttributeName">Scrollable</span>
              <span class="htmlAttributeName">ShowMoveAll</span><span class="htmlOperator">=</span><span class="htmlAttributeValue">false</span>
              <span class="htmlAttributeName">ValueField</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">item =&gt; item</span><span class="quot">&quot;</span>
              <span class="htmlAttributeName">TextField</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">item =&gt; item</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">ItemStartTemplate</span><span class="htmlTagDelimiter">&gt;</span>
        <span class="atSign">&#64;</span>(transferListItemContent( context ))
    <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">ItemStartTemplate</span><span class="htmlTagDelimiter">&gt;</span>
    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">ItemEndTemplate</span><span class="htmlTagDelimiter">&gt;</span>
        <span class="atSign">&#64;</span>(transferListItemContent( context ))
    <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">ItemEndTemplate</span><span class="htmlTagDelimiter">&gt;</span>
<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">TransferList</span><span class="htmlTagDelimiter">&gt;</span>
</pre></div>
<div class="csharp"><pre>
<span class="atSign">&#64;</span>code {
    <span class="keyword">private</span> List&lt;<span class="keyword">string</span>&gt; list = <span class="keyword">new</span> List&lt;<span class="keyword">string</span>&gt; { <span class="string">&quot;Apple&quot;</span>, <span class="string">&quot;Bananas&quot;</span>, <span class="string">&quot;Lemon&quot;</span>, <span class="string">&quot;Broccoli&quot;</span>, <span class="string">&quot;Strawberry&quot;</span>, <span class="string">&quot;Cherry&quot;</span>, <span class="string">&quot;Cabbage&quot;</span> };
    <span class="keyword">private</span> List&lt;<span class="keyword">string</span>&gt; listStart = <span class="keyword">new</span> List&lt;<span class="keyword">string</span>&gt;() { <span class="string">&quot;Cabbage&quot;</span>, <span class="string">&quot;Broccoli&quot;</span> };

    <span class="keyword">private</span> RenderFragment&lt;Blazorise.Components.ListView.ItemContext&lt;<span class="keyword">string</span>&gt;&gt; transferListItemContent =&gt; item =&gt; __builder =&gt;
    {
        &lt;Card Background=Background.Info Shadow=<span class="string">&quot;Shadow.Default&quot;</span>&gt;
            &lt;CardBody&gt;
                <span class="atSign">&#64;</span>{
                    <span class="keyword">var</span> imageSource = $<span class="string">&quot;img/fruit/{item.Value.ToLower()}.png&quot;</span>;
                }
                &lt;Image Source=<span class="string">&quot;<span class="atSign">&#64;</span>imageSource&quot;</span> Style=<span class="string">&quot;width:24px;height:24px;&quot;</span> Text=<span class="string">&quot;Small image&quot;</span> /&gt;
                <span class="atSign">&#64;</span>item.Value
            &lt;/CardBody&gt;
        &lt;/Card&gt;
    };
}
</pre></div>
</div>
